<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../common/jspcommon.jsp"%>
<%@ include file="../common/css.jsp"%>
<%@ include file="../common/js.jsp"%>
<script type="text/javascript">
$(function(){
	//加载分页
	$.fn.pager = function(options){
		if(parseInt(options.pagecount)<=1){
			return;
		}
		$(this).html("<ul></ul>");
		if(parseInt(options.pagecount)>10){
			//如果当前页码小于5
			if(parseInt(options.pagenumber)<4){
				if(parseInt(options.pagenumber) != 1){
					$(this).find("ul").append("<li>上一页</li>");
				}
				for(var i=1; i<=5; i++){
					if(i==parseInt(options.pagenumber)){
						$(this).find("ul").append("<li class='current'><a href='#'>"+i+"</a></li>");
					}else{
						$(this).find("ul").append("<li>"+i+"</li>");
					}
				}
				$(this).find("ul").append("<li><span>...</span></li><li>"+parseInt(options.pagecount)+"</li>");
				$(this).find("ul").append("<li>下一页</li>");
			}else if((parseInt(options.pagecount)-parseInt(options.pagenumber))<3){
				//如果是倒数几页
				var temp = parseInt(options.pagecount)-4;
				if(temp==parseInt(options.pagenumber)){
					temp -= 2;
				}
				$(this).find("ul").append("<li>上一页</li>");
				$(this).find("ul").append("<li>1</li><li><span>...</span></li>");
				for(var i=temp; i<=parseInt(options.pagecount); i++){
					if(i==parseInt(options.pagenumber)){
						$(this).find("ul").append("<li class='current'><a href='#'>"+i+"</a></li>");
					}else{
						$(this).find("ul").append("<li>"+i+"</li>");
					}
				}
				if(parseInt(options.pagenumber) != parseInt(options.pagecount)){
					$(this).find("ul").append("<li>下一页</li>");
				}
			}else{
				//如果是中间几页
				$(this).find("ul").append("<li>上一页</li>");
				$(this).find("ul").append("<li>1</li>");
				//前面特殊值
				if(parseInt(options.pagenumber)!=4){
					$(this).find("ul").append("<li><span>...</span></li>");
				}
				for(var i=(parseInt(options.pagenumber)-2); i<=(parseInt(options.pagenumber)+2); i++){
					if(i==parseInt(options.pagenumber)){
						$(this).find("ul").append("<li class='current'><a href='#'>"+i+"</a></li>");
					}else{
						$(this).find("ul").append("<li>"+i+"</li>");
					}
				}
				//后面特殊值
				if((parseInt(options.pagecount)-parseInt(options.pagenumber))!=3){
					$(this).find("ul").append("<li><span>...</span></li>");
				}
				$(this).find("ul").append("<li>"+parseInt(options.pagecount)+"</li>");
				$(this).find("ul").append("<li>下一页</li>");
			}
		}else{
			if(parseInt(options.pagenumber) != 1){
				$(this).find("ul").append("<li>上一页</li>");
			}
			//如果当前页码小于10
			for(var i=1; i<=parseInt(options.pagecount); i++){
				if(i==parseInt(options.pagenumber)){
					$(this).find("ul").append("<li class='current'><a href='#'>"+i+"</a></li>");
				}else{
					$(this).find("ul").append("<li>"+i+"</li>");
				}
			}
			if(parseInt(options.pagenumber) != parseInt(options.pagecount)){
				$(this).find("ul").append("<li>下一页</li>");
			}
		}
		//给页码绑定事件
		$(this).find("ul").find("li").click(function(){
			var page = $(this).text();
			if(page == "上一页"){
				page = parseInt(options.pagenumber)-1;
			}else if(page == "下一页"){
				page = parseInt(options.pagenumber)+1;
			}
			if(page!=parseInt(options.pagenumber) && page!="..."){
				options.buttonClickCallback(page);
			}
		});
		//计算样式
		$(this).find("ul").find("li").attr("style","cursor: pointer;");
		var parWidth = $(this).parent().width();
        var tWidth = $(this).width();
        var padWidth = (parWidth - tWidth)/2 + "px";
        //$(this).css("padding-left",padWidth).css("padding-right",padWidth);
	}
	
	$("#pager").pager({
		pagenumber : "${pageModel.currentPage}",
		pagecount : "${pageModel.totalPage}",
		buttonClickCallback : function(page) {
			$("#accountLogList").load("/account/accountloglist.htm?memberId=${member.identifier}&page="+page);
		}
	});
});
</script>
<div class="form_box">
 	<div class="title">
     	<h3><b class="icon_triangle_s1"></b><span class="tit">账户记录</span></h3>
     </div>
     <table class="form_table_s1">
     	<thead>
         	<tr>
             	<th width="90" class="col1">流水号</th>
                 <th width="210">交易备注</th>
                 <th width="75">收入</th>
                 <th width="75">支出</th>
                 <th width="95">交易时间</th>
                 <th >账户余额</th>
             </tr>
         </thead>
     	<tbody>
     	<c:forEach items="${pageModel.list}" var="accountLog" varStatus="v">
     		<tr>
             	<td class="col1">
                 	<a href="#" class="order_nums">${accountLog.identifier}</a>
                 </td>
                 <td><span class="trade_mark">${accountLog.summary}</span></td>
                 <td>${accountLog.depositRmb}元</td>
                 <td>${accountLog.withdrawRmb}元</td>
                 <td><fmt:formatDate value="${accountLog.transactionTime}" pattern="yyyy-MM-dd" /></td>
                 <td>${accountLog.rmb}元</td>
             </tr>
        </c:forEach>
         </tbody>
     </table>
     
     <div class="form_fy" id="pager"></div>
 </div>